<script lang="ts" setup>
import { ref } from 'vue'
//分页
const total = ref(Number)
const currentPage = ref(1)
const pageSize = ref(6)
const small = ref(true)
const background = ref(false)
const disabled = ref(false)


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  onSubmit();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  onSubmit();
}
const tableData = ref([])
//获取用户列表
import { getList } from '@/apis/user.js'
async function getUserList() {
  const res = await getList(currentPage.value, pageSize.value)
  console.log(res.data.data.records)
  tableData.value = res.data.data.records
  //总条数
  total.value = res.data.data.total
  console.log(tableData.value)
}
getUserList()
import { InfoFilled } from '@element-plus/icons-vue'
import { deleteUser } from '@/apis/user.js'
const confirmEvent = async (id: string) => {
  console.log('删除!' + id)
  //删除该账号
 const res=await deleteUser(id)
 console.log(res.data.code)
 if(res.data.code!==1){
   return ElMessage.error(res.data.msg)
 }
 if(res.data.code===1){
  getUserList()
   return ElMessage.success('删除成功')
 }
  //并刷新表格
  onSubmit();
}
  
const cancelEvent = () => {
  console.log('取消!')
}


import { reactive } from 'vue'

const queryForm = reactive({
  name: '',
  username: '',
  status: null,
})
//条件查询
const onSubmit = async () => {
  console.log('submit!')
  const res = await getList(currentPage.value, pageSize.value, queryForm.name,queryForm.status,queryForm.username,)
  console.log(res.data.data.records)
  tableData.value = res.data.data.records
  total.value = res.data.data.total
}
import UserForm from './UserForm.vue';
const userForm=ref(null)
//添加账号
function addUser() {
  userForm.value.changeDialogVisible(true)
  console.log('添加账号!')
}
//启用/禁用
import { editStatus } from '@/apis/user.js';
import { ElMessage } from 'element-plus';
async function updateStatus(id:any,status:any){
  const res= await editStatus(id,status)
  //提示信息
  const str=status===1?'禁用':'启用'
  ElMessage.success(str+'成功')
  console.log(res.data)
  onSubmit();
}
//重置密码
import { resetPwd } from '@/apis/user.js';
async function resetPassword(id: any){
  const res = await resetPwd(id)
  console.log(res.data)
  ElMessage.success('密码重置成功')
  onSubmit();
}
</script>
  
<template>
  <div style=" display: flex; flex-direction: column;">
    <el-form :inline="true" :model="queryForm" style="margin-top: 20px;margin-left: 20px;">
      <el-form-item label="姓名">
        <el-input v-model="queryForm.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="queryForm.username" placeholder="请输入账号" clearable />
      </el-form-item>

      <el-form-item label="状态" style="width: 130px;">
        <el-select v-model="queryForm.status" placeholder="请选择" clearable>
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addUser()">新增账号</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="name" label="姓名" width="100" align="center" />
      <el-table-column prop="username" label="账号" width="150" align="center" />
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template  v-slot="{ row }">
          <span v-if="row.status === 1">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="permissions" label="权限" width="100" align="center">
        <template v-slot="{ row }">
          <span v-if="row.permissions === 1">管理员</span>
          <span v-else>普通账号 </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="120" align="center" />
      <el-table-column prop="updateTime" label="最后操作时间" width="120" align="center" />
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template v-slot="{ row }">
          <el-popconfirm :icon="InfoFilled" @confirm="confirmEvent(row.id)" @cancel="cancelEvent" title="你确定要删除该账号吗?">
            <template #reference>
              <el-button link type="primary" size="small" v-if="row.permissions!==1">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" size="small" v-if="row.status===0&&row.permissions!==1" @click="updateStatus(row.id,row.status)">启用</el-button>
          <el-button link type="primary" size="small" v-if="row.status===1&&row.permissions!==1" @click="updateStatus(row.id,row.status)">禁用</el-button>
          <el-popconfirm :icon="InfoFilled" @confirm="resetPassword(row.id)" @cancel="cancelEvent" title="你确定要重置该账号密码吗?">
            <template #reference>
              <el-button link type="primary" size="small">重置密码</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; margin-top: 20px; margin-left: 240px;">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6,8,10]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div>
    <UserForm :onSubmit="onSubmit" ref="userForm"></UserForm>
    </div>
  </div>
</template>
